<template>
	<view class="status-bar-com" :class="isShowBar ? 'show-custom-nav' : ''"
		:style="statusBarComStyle">
		<view :class="isMyBgi ? 'status-bar myBgi' : 'status-bar'"></view>
		<view :class="isMyBgi ? 'custom-nav my-page' : 'custom-nav' " v-if="isShowBar"
			>
			<!-- :style="{top: height + 'px'}" -->
			<view class="icon-btn">
				<uni-icons :color="isMyBgi ? '#fff' : '#000'" @click="onBackTap" type="left" size="28"
					v-if="isShowLeft"></uni-icons>
			</view>
			<text class="title">{{title}}</text>
			<view class="icon-btn">
				<uni-icons :color="isMyBgi ? '#fff' : '#000'" @click="onBackTap" type="right" size="28"
					v-if="isShowRight"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: '',
			isShowLeft: false,
			isShowRight: false,
			isShowBar: false,
			isMyBgi: false,
		},
		data() {
			const _height = this.isShowBar ? (uni.getWindowInfo().statusBarHeight) + 44 : (uni.getWindowInfo().statusBarHeight);
			const _statusBarheight = (uni.getWindowInfo().statusBarHeight);
			
			return {
				statusBarComStyle: {
					// height: _height + 'px',
					top: _statusBarheight+ 'px'
				},
				height: _height,
				viewInfo: {}
			}
		},
		created() {
			let viewInfo = uni.getWindowInfo().safeArea;
			this.viewInfo = viewInfo;
			this.height = uni.getWindowInfo().statusBarHeight;
		},
		methods: {
			onBackTap: function() {
				uni.navigateBack(); // 返回上一页
			},
			// onShareTap: function () {
			//   wx.showShareMenu();  // 调出分享菜单
			// }
		}
	}
</script>

<style lang="scss">
	.status-bar-com {
		overflow: hidden;
		position: fixed;
		left: 0;
		right: 0;
		&.show-custom-nav {
			// margin-bottom: 15px;
			// position: relative;

			&+view {
				position: fixed;
				// top: 90px;
				left: 0;
				right: 0;
			}
		}

		.status-bar {
			width: 100%;
			height: 171px;
			background: url("https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/c640eeb8-125d-4e27-9f70-2f689dbdfe8b.png") no-repeat 0px 0px;
			background-size: 100% 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;

			&.myBgi {
				width: 100%;
				height: 351px;
				height: 636rpx;
				background: url("https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/2651b7dd-3ae8-4e44-a887-0f9ab987dd9b.png") no-repeat 0 0;
				background-size: 100% 100%;
			}
		}

		.custom-nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 44px;
			padding: 0 10px;
			position: relative;
			// top: 40px;
			left: 0;
			right: 0;
			z-index: 1;
			color: #000;

			&.my-page {
				color: #fff;
			}

			.icon-btn {
				width: 28px;
				height: 29px;
			}

			.back-icon,
			.share-icon {
				width: 20px;
				height: 20px;
			}

			.title {
				font-size: 18px;
				font-weight: bold;
			}
		}
	}
</style>